<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="index_1.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/jquery-1.11.3.min.js"></script>
 <script language="javascript" src="js/bootstrap.min.js"></script>
 <!--适应屏幕-->
<meta name="viewport" content="width=device-width,initial-scaiel=1">

<script language="javascript">
//页面加载时，生成随机验证码
	window.onload=function(){
	 createCode(4);    
	}
	
	//生成验证码的方法
	function createCode(length) {
		var code = "";
		var codeLength = parseInt(length); //验证码的长度
		var checkCode = document.getElementById("checkCode");
		////所有候选组成验证码的字符，当然也可以用中文的
		var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
		'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
		'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 
		//循环组成验证码的字符串
		for (var i = 0; i < codeLength; i++)
		{
			//获取随机验证码下标
			var charNum = Math.floor(Math.random() * 62);
			//组合成指定字符验证码
			code += codeChars[charNum];
		}
		if (checkCode)
		{
			//为验证码区域添加样式名
			checkCode.className = "code";
			//将生成验证码赋值到显示区
			checkCode.innerHTML = code;
		}
	}
	
	//检查验证码是否正确
	function validateCode()
	{
		//获取显示区生成的验证码
		var checkCode = document.getElementById("checkCode").innerHTML;
		//获取输入的验证码
		var inputCode = document.getElementById("inputCode").value;
		console.log(checkCode);
		console.log(inputCode);
		if (inputCode.length <= 0)
		{
			alert("请输入验证码！");
		}
		else if (inputCode.toUpperCase() != checkCode.toUpperCase())
		{
			alert("验证码输入有误！");
			createCode(4);
		}
		else
		{
			alert("验证码正确！");
		}       
	}
</script>
</head>
 </head>




<body>
<div class="container">
<!--页头-->
<div class="page-header" id="header">
  <h1>创新实验室项目管理系统 </h1>
</div>
 
<div id="mpage">
 <div><h1 id="deng">优秀作品图片展示</h1></div>
  <p><!--轮播图-->  </p>
  <div id="carousel-example-generic" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

   <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
    <img src="image\02.jpg" alt="无图片" class="center-block img-responsive">
      <div class="carousel-caption"><!---->
         <p class="zi">音乐机器人</p>
        <h3></h3>
    </div>
    </div>
    <div class="item">
      <img src="image/01.jpg" alt="无图片" class="center-block img-responsive">
      <div class="carousel-caption"><!---->
        <p class="zi">人工智能机器人</p>
      </div>
    </div>
    <div class="item">
      <img src="image/03.jpg" alt="无图片" class="center-block img-responsive">
      <div class="carousel-caption"><!---->
        <p class="zi">智能家居</p>
      </div>
    </div>
    <div class="item">
      <img src="image/05.jpg" alt="无图片" class="center-block img-responsive">
      <div class="carousel-caption"><!---->
        <p class="zi">酸奶</p>
      </div>
    </div>
    <div class="item">
      <img src="image/04.jpg" alt="无图片" class="center-block img-responsive">
      <div class="carousel-caption"><!---->
        <p class="zi">蛋糕</p>
      </div>
    </div>
    
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<div><h1 id="deng">登录or注册</h1></div>

<!--登录or注册-->
  <div id="left-biaoge">
    <form action="" method="get"><table width="520" border="1">
          <tr>
            <td height="45">姓名</td>
            <td><label for="name"></label>
              <input type="text" name="name" id="name"></td>
          </tr>
          <tr>
            <td height="45">学号</td>
            <td><label for="id"></label>
              <input type="text" name="id" id="id"></td>
          </tr>
          <tr>
            <td height="45">密码</td>
            <td><label for="password"></label>
              <input type="password" name="password" id="password"></td>
          </tr>
          <tr>
            <td>验证码</td>
            <td ><input type="text" id="inputCode" size="5" name="yzm"/>
              <div id="checkCode" class="code" onClick="createCode(4)" ></div></td>
          </tr>
          <tr>
            <td height="45" colspan="2"><p>
              <label>
                <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
                我已阅读并接受</label>
              <a href="#">用户须知</a> </p></td>
          </tr>
          <tr>
            <td height="45"><a href="s.jsp">
              <input type="button" name="button" id="button" value="学生提交">
              </a></td>
          </tr>
        </table>
    </form>
  <!--登录or注册-->
  <div id="left-biaoge">
    <form action="" method="get"><table width="520" border="1">
          <tr>
            <td height="45">姓名</td>
            <td><label for="name"></label>
              <input type="text" name="name" id="name"></td>
          </tr>
          <tr>
            <td height="45">教工号</td>
            <td><label for="id"></label>
              <input type="text" name="id" id="id"></td>
          </tr>
          <tr>
            <td height="45">密码</td>
            <td><label for="password"></label>
              <input type="password" name="password" id="password"></td>
          </tr>
          <tr>
            <td>验证码</td>
            <td ><input type="text" id="inputCode" size="5" name="yzm"/>
              <div id="checkCode" class="code" onClick="createCode(4)" ></div></td>
          </tr>
          <tr>
            <td height="45" colspan="2"><p>
              <label>
                <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
                我已阅读并接受</label>
              <a href="#">用户须知</a> </p></td>
          </tr>
         <tr>
            <td height="45"><a href="t.jsp">
              <input type="button" name="button" id="button" value="教师提交">
              </a></td>
          </tr>
        </table>
     
   
    </form>
  
  </div>
<!--右侧长链接-->  

 <div id="left-lianjie">
     <ul>
     <div id="left-lianjieti">全国优秀创新作品</div>
     <li class="left-lianjiezi"><a href="#">VR眼镜</a></li>
     <li class="left-lianjiezi"><a href="#">机器象棋系统</a></li>
     <li class="left-lianjiezi"><a href="#">无人机监控气象</a></li>
     <li class="left-lianjiezi"><a href="#">全息景象</a></li>
     <li class="left-lianjiezi"><a href="#">社交软件——喂</a></li>
     <li class="left-lianjiezi"><a href="#">社交软件——喂</a></li>
     </ul>
   </div>
  
 <p>
   <!--页脚-->
 </p>
 <div id="food">
   <p><a href="#">  联系我们  </a>|<a href="#">  收藏本网站  </a>|<a href="#">  人才招聘  </a>|<a href="#">  信息反馈  </a>|<a href="#">  开源社区</a></p>
  <p>&nbsp;</p>
</div>

 
</div>
</body>
</html>
